†IPFSをコマンドラインで実行しながら学んでいく小ネタ~動画ファイルの保存と再生~ †
IPFSを動画ファイルの保存と再生に使うこともできます。
mp4の保存と再生
いつも通りipfs addコマンドでmp4の動画ファイルを追加します。
$ ipfs add -q <<path_to_movie_file>> | tail -n1
※ -qオプションを使用することでハッシュのみの出力にできます
※ tail -n1により、最上位フォルダーのハッシュのみが出力されるようにします
ローカルゲートウェイから動画ファイルにアクセスするURLは、
http://localhost:8080/ipfs/<<最上位フォルダーのハッシュ>> となります。
ブラウザからアクセスした時は、
このようにブラウザに組み込まれているプレイヤーで再生できました。
$ curl -I http://localhost:8080/ipfs/QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F HTTP/1.1 301 Moved Permanently Accept-Ranges: bytes Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Headers: Range Access-Control-Allow-Headers: User-Agent Access-Control-Allow-Headers: X-Requested-With Access-Control-Allow-Methods: GET Access-Control-Allow-Origin: * Access-Control-Expose-Headers: Content-Length Access-Control-Expose-Headers: Content-Range Access-Control-Expose-Headers: X-Chunked-Output Access-Control-Expose-Headers: X-Ipfs-Path Access-Control-Expose-Headers: X-Ipfs-Roots Access-Control-Expose-Headers: X-Stream-Output Cache-Control: public, max-age=29030400, immutable Content-Length: 11916526 Content-Type: video/mp4 Etag: "QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F" Location: http://bafybeibdzbijfwavnorsaoe26w3m6w44mlavrhwpmtg5xzywymt667wkby.ipfs.localhost:8080/ X-Ipfs-Path: /ipfs/QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F X-Ipfs-Roots: QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F Date: Mon, 11 Jul 2022 08:14:45 GMT
curlでレスポンスヘッダーを除いてみると、
Content-Typeはきちんとvideo/mp4になっていますね。
hlsでも同じようにアクセスできる？
mp4のファイルをhlsに変換してからipfsに追加してみます。
hlsにするコマンド例)
ffmepgを使って変換します。オプションは特に指定しませんでした。
$ ffmpeg -i sample-15s.mp4 ./hls/sample-15s.m3u8 $ ls -la hls sample-15s.m3u8 sample-15s0.ts sample-15s1.ts
このようにm3u8とtsファイルが生成されます。
ではこのhlsフォルダをipfsに追加してみます。
$ ipfs add -r hls added QmVw9q9TUdPPFqkg7yESpJn9yi7vRGbbQgb7TUSX8J3bp5 hls/sample-15s.m3u8 added QmUexgWEcJUrHMNVNPRUJ3sNsYjqgdv79u3P1jEPyudEr3 hls/sample-15s0.ts added QmRniMzFBHj9tC11Yu9kdrRrpqy6efkTFmmEgQySYj987P hls/sample-15s1.ts added QmZ1CUAFpWPRaSYmbrAMM8nT74MyHeP9LZr5cesmab4NfE hls
動画プレイヤーでm3u8のインデックスファイルを指定するとhlsの再生ができるようになるので、ipfsでも同じように
http://localhost:8080/ipfs/m3u8のハッシュ>> でローカルゲートウェイ経由でアクセスしてみましょう。
hls再生プレイヤー
hlsはchromeでは再生できないので、hls.jsを使います。
basic-usage.html をダウンロードし、hlsファイルのパスをipfsのurlに変更します。
20行目のhls.loadSourceの箇所です。
例）
hls.loadSource('http://localhost:8080/ipfs/QmVw9q9TUdPPFqkg7yESpJn9yi7vRGbbQgb7TUSX8J3bp5');
ブラウザでhtmlファイルを表示してみたら、
クルクルがずっと続いて再生はされませんでした。
m3u8のインデックスファイルの読み込みはOKでしたが、tsファイルの読み込みができていないようです。
インデックスはこのようになっていて、
#EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:8 #EXT-X-MEDIA-SEQUENCE:0 #EXTINF:8.341667, sample-15s0.ts #EXTINF:7.140467, sample-15s1.ts #EXT-X-ENDLIST
プレイヤー側は http://bafybeidq3b547z7mnohv4ytpz7jk2zzllslnkduv4en2zzhbkqutsdfmgi.ipfs.localhost:8080/sample-15s0.ts といった感じでアクセスしようとしていますが、これはもちろん404となってしまいます。
実際はipfsのゲートウェイを介したurlにならないといけない。
hls.jsだけでは再生は難しそうです。
色々とドキュメントを漁っていたところ、
IPFSをJavascriptで操作できるライブラリであるJS-IPFSというもので IPFSによるビデオストリーミングする例がありました。
go-ipfsを使用してコマンドライン上からIPFSにアクセスしていましたが、次回からはjs-ipfsを使ってプログラムからでもIPFSに対する操作ができることを学んでいきたいと思います
